<template>
  <view class="min-h-screen bg-[#f0f0f0] pb-8">
    <!-- 顶部图片区域 - 添加圆角和阴影 -->
    <image class="w-full h-[450rpx] object-cover rounded-b-lg shadow-sm" src="@/assets/imgs/shan.png" mode="aspectFill" />

    <view class="z-10 mt-[-120rpx] relative">
      <view class="flex items-start gap-4 mb-2 w-[690rpx] mx-auto box-border p-3 bg-[#fff] rounded-lg shadow-sm" @tap="jump(item)" v-for="(item, i) in list" :key="i">
        <!-- 商品图片 - 添加边框和圆角 -->
        <image :src="getFullPath(item.image)" class="w-[200rpx] h-[200rpx] rounded-lg border border-gray-100 object-cover" />

        <!-- 商品信息 - 优化排版 -->
        <view class="flex-1 flex flex-col gap-1">
          <!-- 单价行 -->
          <view class="text-[32rpx] font-bold text-[#333]">{{ item.name }}</view>
          <view class="text-[28rpx] text-gray-500">需要{{ item.mi }}袋米</view>
          <view class="text-[28rpx] text-gray-500">{{ item.water }}杯水</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";
import http from "@/utils/http";
import { getFullPath } from "@/utils/config";
import { initShare } from "@/utils/config";

// 分享给好友
useShareAppMessage(() => initShare());

// 分享到朋友圈
useShareTimeline(() => initShare());

// 分享给好友
const list = ref([
  {
    name: "南山法会",
    mi: "50",
    water: "1",
  },
  {
    name: "南山法会",
    mi: "50",
    water: "1",
  },
  {
    name: "南山法会",
    mi: "50",
    water: "1",
  },
]);

const count = ref(1);
const selectedText = ref("");

const handleChange = (e) => {
  const index = e.detail.value;
  selectedText.value = columns[index].text;
};

const jump = (item) => {
  Taro.navigateTo({
    url: `/other/home/tmp-detail?id=${item.id}`,
  });
};

onMounted(() => {
  getGoods();
  
  // 显示分享菜单
  Taro.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
});

function getGoods() {
  http.post("/index.php/index/api/index", {
    Func: "getTemple",
  }).then(res => {
    console.log("res", res);
    list.value = [];
    if (res?.error === 0) {
      list.value = res.data;
    }
  });
}
</script>

<style lang="scss">
/* 全局样式优化 */
page {
  background-color: #f8fafc;
}
</style>
